<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="img/1.jpg" sizes="32x32" type="image/jpg">
    <link rel="icon" href="img/1.jpg" sizes="16x16" type="image/jpg">
    <meta name="keywords" content="超市管理系统">
    <meta name="description" content="bootstrap-admin基于bootstrap5的超市管理系统">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/overlayscrollbars/styles/overlayscrollbars.min.css">
    <link rel="stylesheet" href="dist/css/bootstrap-admin.min.css">
    <title>我的超市管理系统</title>
</head>

<body data-theme="light">
<!--头部导航-->
<ul class="bsa-header">
    <!-- 侧边栏触发按钮(移动端时显示) -->
    <li class="bsa-sidebar-toggler" data-bsa-toggle="pushmenu">
        <div class="bsa-header-item">
            <i class="bi bi-list"></i>
        </div>
    </li>
    <!--  搜索组件(不需要可删除)  -->
    <li>
        <div class="bsa-header-item bsa-cursor-default">
            <!--    搜索表单包裹区域        -->
            <div class="bsa-search-form-wrapper"
                 data-bsa-toggle="navbar-search"
                 data-close-reset="false"
                 data-action="pages/search.html"
                 data-params='{"type":"article","user":"admin2"}'>
                <div class="bsa-search-form">
                    <input type="text" class="form-control bsa-input-search" aria-label="搜索关键词"
                           placeholder="搜索关键词">
                    <button class="bsa-search-submit-btn" type="submit"><i class="bi bi-search"></i></button>
                    <button class="bsa-search-close-btn" type="button"><i class="bi bi-x-lg"></i></button>
                </div>
            </div>
            <!--    移动端搜索表单触发器(移动端会显示)        -->
            <i class="bi bi-search bsa-search-form-toggler bsa-cursor-pointer"></i>
        </div>
    </li>
    <!--  占位(可以让后面的li居右)  -->
    <li class="flex-grow-1"></li>
    <!--  通知(如果有新消息则添加类名.bsa-has-msg)  -->
    <li>
        <div class="bsa-header-item" data-qt-tab='{"title":"消息中心","url":"pages/message.html"}'
             data-qt-target=".qtab">
            <i class="bi bi-bell bsa-has-msg"></i>
        </div>
    </li>
    <!--  拓展菜单(建议把拓展放在此处,以免破坏头部整体布局,不需要可以直接删除)  -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-grid"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between bg-body">
                    <span class="bsa-fs-15">拓展菜单</span>
                    <a href="javascript:" class="bsa-fs-13 text-decoration-none text-body-secondary">编辑</a>
                </div>
                <div class="card-body">
                    <div class="container-fluid">
                        <div class="row row-cols-3 g-3">
                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary  bsa-wh-45 rounded-circle">
                                    <i class="bi bi-envelope"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">邮箱</div>
                            </a>

                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="pages/lockscreen.html">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-lock"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">锁屏</div>
                            </a>

                            <a
                                    class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                                    href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">前台直达</div>
                            </a>

                            <a
                                    class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                                    href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单4</div>
                            </a>
                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单5</div>
                            </a>
                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单6</div>
                            </a>
                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单7</div>
                            </a>

                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单8</div>
                            </a>

                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单9</div>
                            </a>

                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单10</div>
                            </a>

                            <a class="col text-decoration-none text-body-secondary d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div
                                        class="d-flex align-items-center justify-content-center bsa-fs-25 bg-body-secondary bsa-wh-45 rounded-circle">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-fs-14 bsa-ellipsis-2 text-center">拓展菜单11</div>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="card-footer text-center bg-body">
                    <a href="javascript:" class="bsa-fs-14 text-decoration-none text-body-secondary">查看更多菜单</a>
                </div>
            </div>
        </div>
    </li>
    <!--  全屏  -->
    <li class="bsa-fullscreen-toggler">
        <div class="bsa-header-item">
            <i class="bi bi-arrows-fullscreen"></i>
        </div>
    </li>
    <!--  主题配色  -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-palette"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between bg-body">
                    <span class="bsa-fs-15">主题配色</span>
                </div>
                <div class="card-body">
                    <!--    配色包裹      -->
                    <div class="bsa-theme-switcher-wrapper">
                        <input class="form-check-input" type="checkbox" value="light">
                        <input class="form-check-input" type="checkbox" value="dark">
                        <input class="form-check-input" type="checkbox" value="indigo">
                        <input class="form-check-input" type="checkbox" value="green">
                        <input class="form-check-input" type="checkbox" value="blue">
                        <input class="form-check-input" type="checkbox" value="yellow">
                        <input class="form-check-input" type="checkbox" value="pink">
                        <input class="form-check-input" type="checkbox" value="red">
                        <input class="form-check-input" type="checkbox" value="orange">
                        <input class="form-check-input" type="checkbox" value="cyan">
                        <input class="form-check-input" type="checkbox" value="teal">
                    </div>
                </div>
            </div>
        </div>
    </li>
    <!--    管理员信息    -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown">
            <div class="bsa-user-area">
                <img src="img/2.jpg" class="bsa-user-avatar" alt="用户头像">
                <div class="bsa-user-details">
                    <div class="bsa-ellipsis-1 bsa-fs-15">
                        当前用户:<span th:text="${username}"></span>
                    </div>
                    <!-- 管理员角色RBAC权限设计时可用(不需要可删除,上面的用户名可自动垂直居中)  -->
                    <div class="bsa-ellipsis-1 bsa-fs-13 text-muted">超级管理员</div>
                </div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li>
                <a class="dropdown-item" href="javascript:"
                   data-qt-tab='{"title":"个人资料","url":"pages/profile.html"}'
                   data-qt-target=".qtab">
                    <i class="bi bi-person me-2"></i>个人资料
                </a>
            </li>
            <li>
                <a class="dropdown-item bsa-clear-cache" href="javascript:"
                   data-qt-tab='{"title":"修改密码","url":"pages/password.html"}'
                   data-qt-target=".qtab">
                    <i class="bi bi-key me-2"></i>修改密码
                </a>
            </li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li class="bsa-logout"><a class="dropdown-item" href="/logout"><i
                    class="bi bi-box-arrow-right me-2"></i>退出登录</a>
            </li>
        </ul>
    </li>
</ul>

<!--侧边栏-->
<div class="bsa-sidebar">
    <!--  侧边栏头部部分(展示品牌logo)  -->
    <div class="bsa-sidebar-header">
        <img src="img/1.jpg" class="bsa-logo-icon" alt="logo-icon" width="100%">
        <div class="bsa-logo-text ms-2 bsa-ellipsis-2">管理系统</div>
    </div>
    <!--  侧边栏的身体部分  -->
    <div class="bsa-sidebar-body" data-overlayscrollbars-initialize>
        <!--   侧边栏的菜单     -->
        <ul class="bsa-menu" data-bsa-toggle="sidebar" data-accordion="true" data-click-close="true">
            <li>
                <a href="pages/welcome">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-person-lock"></i>货物管理
                </a>
                <ul>
                    <li>
                        <a href="goods/goodsList">货物列表</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>供应商管理
                </a>
                <ul>
                    <li>
                        <a href="pages/blank">供应商列表</a>
                    </li>

                </ul>
            </li>
            <li>


            </li>

        </ul>
    </div>
</div>

<!--内容区域(用于tab选项卡插件)-->
<div class="bsa-content">
    <div class="qtab" data-qt-tabs='[{"title":"首页","url":"pages/welcome","close":false}]'></div>

</div>

<!--版权信息-->
<div class="bsa-footer">
    <p class="mb-0">Copyright © 2023. 21106214吕建新制作</p>
</div>

<!--加载层-->
<div class="bsa-preloader">
    <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>


<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/overlayscrollbars/browser/overlayscrollbars.browser.es6.min.js"></script>
<script src="lib/bootstrap-quicktab/dist/js/bootstrap-quicktab.min.js"></script>
<script src="dist/js/bootstrap-admin.min.js"></script>
<script src="dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<!--<script src="dist/js/bootstrap-admin.mock.js"></script>-->

<script>
    $(function () {

        //头部搜索框处理(不需要可以删除,不明白的可以看bootstrap-admin官方文档)
        $(document).on('search.bsa.navbar-search', function (e, inputValue, data) {
            //先得到请求地址,组合后大概是这样pages/search.html?keyword=dsadsa&type=article&user=admin2
            let url = data.action + '?keyword=' + inputValue + '&' + $.param(data.params);

            //然后通过tab打开一个搜索结果的窗口
            Quicktab.get('.qtab').addTab({
                title: '<i class="bi bi-search"></i><span class="text-danger ms-2">' + inputValue + '</span>',
                url: url,
                close: true,
            })
        })

        //退出登录
        $(document).on('click', '.bsa-logout', function (e) {
            e.preventDefault();

            $.modal({
                body: '确定要退出吗？',
                cancelBtn: true,
                ok: function () {

                    //请求退出路由
                    $.ajax({
                        method: 'post',
                        url: '/logout',
                    }).then(response => {

                        if (response.code === 200) {//跳转到后台首页

                            $.toasts({
                                type: 'success',
                                content: '退出成功',
                                onHidden: function () {
                                    top.location.replace('/');
                                }
                            })
                        }
                    });


                }
            })


        });
    });
</script>
</body>
</html>
